import { Button } from 'antd';
import PropsTypes from 'prop-types'
import React, { Component } from 'react';
import './index.css'

class Footer extends Component {

  // props 类型以及必要性限制
  static propsTypes = {
    todos:PropsTypes.array.isRequired
  }

  // 复选框全选回调
  handleCheckAll = (event)=>{
    this.props.todoCheckAll(event.target.checked)
  }

  // 按钮清除已完成，事件回调
  handleClearDone = ()=>{
    this.props.clearDoneTodo()
  }

  render() {
    const { todos } = this.props
    // 统计已完成数量
    const countDone = todos.reduce((pre, todo)=>{return pre + (todo.done ? 1 : 0)}, 0)
    // 计算总数量
    const total = todos.length
    return (
      <div className="todoFooter">
        <label>
          <input type="checkbox" onChange={this.handleCheckAll} checked={countDone === total && total !== 0 ? true : false}/>
        </label>
        <span>
          <span>已完成 {countDone}</span> / 全部 {total}
        </span>
        {/* <button className="btn btnDanger">清除所有已完成任务</button> */}
        <Button danger 
          type='primary'
          onClick={this.handleClearDone}
        >
          清除所有已完成任务
        </Button>
      </div>
    );
  }
}

export default Footer;